<template>
    <div class="roleHasUser">
        <el-table
            ref="treeTable"
            height="500"
            :data="tableData"
            style="width: 100%"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @select="handleSelectionChange"
        >
            <!-- 是否开启选择框 begin -->
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column prop="title" label="菜单名称" sortable width="200"> </el-table-column>
            <el-table-column prop="zbnh" label="按钮">
                <template slot-scope="scope">
                    <el-checkbox-group v-model="scope.row.btns">
                        <el-checkbox v-for="btn in btnLists" :label="btn.name" :key="btn.value">{{ btn.name }}</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="dialogTableClose">取消</el-button>
        </div>
    </div>
</template>

<script>
import {Utility} from '@/libs/utility'
export default {
    props: ['roleInfo'],
    components: {},
    data() {
        return {
            tableData: [],
            enableCascade: true,
            // 这里先随便定义几个
            btnLists: [
                {
                    id: 1,
                    name: '新增',
                    value: 'add'
                },
                {
                    id: 2,
                    name: '修改',
                    value: 'update'
                },
                {
                    id: 3,
                    name: '删除',
                    value: 'delete'
                },
                {
                    id: 4,
                    name: '指令下发',
                    value: 'zlxf'
                },
                {
                    id: 5,
                    name: '审核',
                    value: 'check'
                },
                {
                    id: 6,
                    name: '下载',
                    value: 'download'
                },
                {
                    id: 7,
                    name: '导出',
                    value: 'export'
                }
            ]
        }
    },
    methods: {
        onSubmit() {
            this.dialogTableClose()
        },
        dialogTableClose() {
            this.$emit('close', '')
        },
        initPage() {
            const menuList = window.sessionStorage.getItem('menuList')
            const jsonMenu = JSON.parse(menuList)
            // 拉平
            var listData = Utility.arrayFlat(jsonMenu, (t) => t.children)
            listData.map((t) => {
                t.btns = ['add']
                return t
            })
            // 去重
            var newList = Utility.removeObjByAttr(listData)
            // 折叠
            const treeData = Utility.arrayCascade(newList, (c, p) => c.parentId == p.id, 'children')
            console.log(treeData, 'treeData....')
            this.tableData = treeData
        },
        handleSelectionChange(selectNode, curNode) {
            const checked = selectNode.find((t) => t.id == curNode.id) != null
            this.cascadeCheck(curNode, checked)
        },
        // // 检查节点是否被选中
        // isNodeSelected(node) {
        //     const treeTable = this.$refs.treeTable
        //     console.log(treeTable, "treeTable................")
        //     return this.$refs.treeTable.getRowKeys().includes(this.$refs.treeTable.getRowKey(node))
        // },
        // 级联勾选的核心方法
        cascadeCheck(node, checked) {
            if (!this.enableCascade) {
                this.$refs.treeTable.toggleRowSelection(node, checked)
                return
            }

            // 设置当前节点的选中状态
            this.$refs.treeTable.toggleRowSelection(node, checked)

            // 级联处理子节点
            if (node.children && node.children.length > 0) {
                node.children.forEach((child) => {
                    this.cascadeCheck(child, checked)
                })
            }

            // 处理父节点状态
            this.updateParentStatus(node, checked)
        },
        // 更新父节点的选中状态
        updateParentStatus(node, checked) {
            if (!this.enableCascade) return

            // 找到父节点
            const parent = this.findParentNode(this.tableData, node)
            if (!parent) return

            // 检查所有子节点的选中状态
            let allChecked = true
            let noneChecked = true

            parent.children.forEach((child) => {
                console.log(child)
                // const isSelected = this.isNodeSelected(child)
                const isSelected = checked
                if (!isSelected) allChecked = false
                if (isSelected) noneChecked = false
            })

            // 更新父节点状态
            if (allChecked) {
                this.$refs.treeTable.toggleRowSelection(parent, true)
            } else if (noneChecked) {
                this.$refs.treeTable.toggleRowSelection(parent, false)
            }

            // 递归更新上层父节点
            this.updateParentStatus(parent, checked)
        },
        // 查找父节点
        findParentNode(data, node) {
            for (let i = 0; i < data.length; i++) {
                const item = data[i]
                if (item.children && item.children.length > 0) {
                    // 检查是否在当前节点的子节点中
                    const found = item.children.find((child) => child.id === node.id)
                    if (found) return item

                    // 递归查找更深层级
                    const parent = this.findParentNode(item.children, node)
                    if (parent) return parent
                }
            }
            return null
        }
    },
    mounted() {
        this.initPage()
    }
}
</script>

<style scoped lang="scss"></style>
